<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-10-18 14:13
  PageName：d_imagebg_Repeat.html
  Function：设置背景图像 - 显示方式
  URL：http://localhost:8080/f_image/f3_image_background/d_imagebg_Repeat.html
-->

<head>
    <meta charset="UTF-8">
    <title>设置背景图像 - 显示方式</title>

    <style type="text/css">
        #call {
            width: 218px;
            font-size: 14px;
            float: left;
            margin: 4px;
            text-align: center;
        }

        #call_tit {
            background: url(images/call_top.gif);  /* 头部背景图像 */
            background-repeat: no-repeat;          /* 不平铺显示 */
            height: 43px;                          /* 固定高度，与背景图像高度一致 */
            color: #fff;
            font-weight: bold;
            line-height: 43px;                     /* 标题垂直居中 */
        }

        #call_mid {
            background-image: url(images/call_mid.gif);
            background-repeat: repeat-y;      /* 垂直平铺 */
            height: 160px;                    /* 可自由设置的高度 */
        }

        #call_btm {
            background-image: url(images/call_btm.gif);  /* 底部背景图像 */
            background-repeat: no-repeat;                /* 不平铺显示 */
            height: 11px;                                /* 固定高度，与背景图像高度一致 */
        }

        #call .a {
            height: 120px;
        }

        #call .b {
            height: 160px;
        }

        #call .c {
            height: 220px;
        }
    </style>
</head>

<body>
<div id="call">
    <div id="call_tit">公司公告</div>
    <div id="call_mid" class="a">height:120px;</div>
    <div id="call_btm"></div>
</div>

<div id="call">
    <div id="call_tit">公司公告</div>
    <div id="call_mid" class="b">height:160px;</div>
    <div id="call_btm"></div>
</div>

<div id="call">
    <div id="call_tit">公司公告</div>
    <div id="call_mid" class="c">height:220px;</div>
    <div id="call_btm"></div>
</div>
</body>
</html>